<template>
  <view class="">
    <cu-layout ref="layoutRef" show-switch navbar="custom" tabbar="/pages/index/index">
      <view class="">
        <view class="head">
          <view class="head-bg">
            <image class="head-bg-img" :src="bgImg" />
          </view>
          <view class="head-mian">
            <view
              class=""
              :style="{
                height: $.addUnit($.sys().statusBarHeight + $.getPx(navbarStyle.height) + 50,'px'),
              }"
            />
            <view class="head-fixed" :class="!state.isStickyTop ? 'bg-white shadow-b' : ''">
              <uv-status-bar bg-color="transparent" />
              <view
                class="relative flex-c pl-12"
                :style="{height: navbarStyle.height + 'px', paddingRight: $.utils.isH5() ? '12px' : `${navbarStyle.menuButtonWidth + navbarStyle.menuButtonLeft * 2}px`}"
              >
                <uv-search
                  v-bind="{
                    placeholderColor: state.isStickyTop ? '#fff' : undefined,
                    searchIconColor: state.isStickyTop ? '#fff' : undefined,
                    bgColor: 'transparent',
                    height: navbarStyle.menuButtonHeight,
                    placeholder: '搜索商品',
                    showAction: false,
                    disabled: true,
                    boxStyle: {backgroundColor: state.isStickyTop ? 'rgba(0,0,0,.2)' : '#f2f2f2'}
                  }"
                />
                <view class="absolute-full" @click="$.router.go('/pages/goods/list')" />
              </view>
              <cu-layout-shop :color="state.isStickyTop ? '#fff' : ''" />
            </view>
            <view class="p-10" style="padding-top: 10rpx;">
              <uv-swiper
                v-if="state.banner.length"
                :list="state.banner"
                radius="5"
                key-name="cover"
                bg-color="#ffffff"
                @change="({current}) => state.bannerActive = current"
              />
            </view>
          </view>
        </view>

        <cu-goods-list :list="state.product" />

        <view class="px-20 pb-20 flex-c" @click="$.router.go('/pages/cate/index')">
          <view class="flex-ca text-primary">
            <text class="text-16">更多商品</text>
            <text class="iconfont icon-xiangyou1 ml-2" />
          </view>
        </view>
      </view>
    </cu-layout>
  </view>
</template>

<script setup>
import {
  computed,
  watch,
  reactive
} from 'vue'
import {
  onLoad,
  onPageScroll
} from '@dcloudio/uni-app'
import $ from '@/sheep'

const state = reactive({
  banner: [],
  bannerActive: 0,
  product: [],
  isStickyTop: true
})
const bgImg = computed(() => state.banner[state.bannerActive]?.cover)
const navbarStyle = computed(() => $.platform.navbarStyle)
const useShop = $.store('shop')
onLoad(() => {})
watch(() => useShop.shopId, newVal => {
  if (newVal) {
    reload()
  }
}, {
  immediate: true
})
onPageScroll(({
  scrollTop
}) => {
  state.isStickyTop = scrollTop > 0 ? false : true
})

function reload() {
  $.get('/Index/index', {}, {
    isShop: 1
  }).then(res => {
    state.banner = res.data.banner
    state.product = res.data.product
  })
}

</script>
<style lang="scss">
	.head {
		position: relative;
	}

	.head-bg {
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		z-index: 0;
		-webkit-filter: blur(0);
		filter: blur(0);
		overflow: hidden;
	}

	.head-bg-img {
		display: block;
		width: 100%;
		height: 100%;
		filter: blur(15px);
		transform: scale(1.5);
	}

	.head-mian {
		position: relative;
		z-index: 1;
	}

	.head-fixed {
		position: fixed;
		width: 100%;
		top: 0;
		background-color: transparent;
		transition: background-color 0.5s ease;
		z-index: 2;

		&.bg-white {
			background-color: #fff;
		}
	}
</style>
